<template>
	<div class="app-container">
		<h1 style="text-align: left;">奖学金评定系统</h1>
		<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
			<div>
				<el-form-item label="学生姓名" prop="name">
					<el-input v-model="queryParams.name" placeholder="请输入学生姓名" clearable
										@keyup.enter.native="handleQuery"/>
				</el-form-item>
			</div>
			<div>
				<el-form-item label="学生学号" prop="sno">
					<el-input v-model="queryParams.sno" placeholder="请输入学生学号" clearable @keyup.enter.native="handleQuery"/>
				</el-form-item>
			</div>
			<div>
				<el-form-item label="学生年级" prop="grade">
					<el-input v-model="queryParams.grade" placeholder="请输入学生年级" clearable
										@keyup.enter.native="handleQuery"/>
				</el-form-item>
			</div>
			<div>
				<el-form-item label="总分" prop="score">
					<el-input v-model="queryParams.score" placeholder="请输入总分" clearable @keyup.enter.native="handleQuery"/>
				</el-form-item>
			</div>
			<div>
				<el-form-item>
					<el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
					<el-button size="mini" @click="resetQuery">重置</el-button>

					<el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button>

				</el-form-item>
			</div>


		</el-form>


		<el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center"/>
			<el-table-column label="编号" align="center" prop="id"/>
			<el-table-column label="学生姓名" align="center" prop="name"/>
			<el-table-column label="学生学号" align="center" prop="sno"/>
			<el-table-column label="学生年级" align="center" prop="grade"/>
			<el-table-column label="总分" align="center" prop="score"/>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button size="mini" type="text" @click="toDetail(scope.row)">录入成绩</el-button>
					<el-button size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
					<el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
								@pagination="getList"/>

		<!-- 添加或修改学生对话框 -->
		<el-dialog :title="title" v-model="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="学生姓名" prop="name">
					<el-input v-model="form.name" placeholder="请输入学生姓名"/>
				</el-form-item>
				<el-form-item label="学生学号" prop="sno">
					<el-input v-model="form.sno" placeholder="请输入学生学号"/>
				</el-form-item>
				<el-form-item label="学生年级" prop="grade">
					<el-input v-model="form.grade" placeholder="请输入学生年级"/>
				</el-form-item>

				<el-form-item label="总分" prop="score">
					<el-input v-model="form.score" placeholder="请输入总分"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {listStudent, getStudent, delStudent, addStudent, updateStudent} from "@/api/app/student";

export default {
	name: "Student",
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 学生表格数据
			studentList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: null,
				sno: null,
				grade: null,
				infoId: null,
				score: null
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 查询学生列表 */
		getList() {
			this.loading = true;
			listStudent(this.queryParams).then(response => {
				this.studentList = response.data.list;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				name: null,
				sno: null,
				grade: null,
				infoId: null,
				score: null
			};

		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams = {
				pageNum: 1,
				pageSize: 10,
				name: null,
				sno: null,
				grade: null,
				infoId: null,
				score: null
			},
					this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加学生";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids
			getStudent(id).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = "修改学生";
			});
		},
		toDetail(row) {
			this.$router.push({
				path: '/studentDetail',
				query: {
					'data': JSON.stringify(row)
				}
			})
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.id != null) {
						updateStudent(this.form).then(response => {
							ElMessage({
								message: '修改成功',
								type: 'success',
							})
							this.open = false;
							this.getList();
						});
					} else {
						addStudent(this.form).then(response => {
							ElMessage({
								message: '新增成功',
								type: 'success',
							})

							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		async handleDelete(row) {
			const ids = row.id || this.ids;

			await delStudent(ids);

			await this.getList();
			ElMessage({
				message: '删除成功',
				type: 'success',
			})

		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('app/student/export', {
				...this.queryParams
			}, `student_${new Date().getTime()}.xlsx`)
		}
	}
};
</script>
<style>
.app-container {
	padding: 20px;
	border: 1px solid #ccc;
		background-color:#79bbff;
}
</style>
